import * as React from 'react';
import '../../static/writeArticle.css';
import '../../static/cssUnit.css';
import AnthologySubmit from './AnthologySubmit';
import AnthologyList from './AnthologyList';
import TextEditor from "./textEditor/TextEditor";
import SubList from './SubList'
import ListFactory, {ILiList} from './lib/ListFactory';
import SubListFactory from "./lib/SubListFactory";
import {connect} from 'react-redux';
import API from '../../API';
import {IReducer} from "../../reducer";
import {refreshListAction} from "../../action";


export interface IState {
    isCreateAnthologyDisplay:boolean
    isSubMenu:boolean
}

export interface IProps {
    dispatch ?: any
}

class WriteArticle extends React.Component<IProps>{
    isEditor: boolean = false;
    subMenuIndex: number;
    subMenuList: SubListFactory;

    state:IState = {
        isCreateAnthologyDisplay:false,
        isSubMenu:false
    };

    liLists:ListFactory = new ListFactory();
    container:any = null;
    inputValue:string = '';


    componentDidMount(){
        this.props.dispatch(refreshListAction({refreshWriteArticle:this.refreshWriteArticle(this)}));

        API.post.getAnthology().then((res)=>{
            const {result} = res.data;
            const _result:ILiList[] = result.map((val:any)=>{
                return {
                    anthologyTitle : val.anthology,
                    storeId : val.id
                }
            });

            this.liLists.againSetList(_result);
            this.setState({});
        });
    }


    createAnthologyDisplayAndRefreshWriteArticle (e:Event){
        e.stopPropagation();
        this.setState({isCreateAnthologyDisplay:true});
    };

    createAnthologyNoDisplayAndRefreshWriteArticle =(e:Event)=>{
        e.stopPropagation();
        this.setState({isCreateAnthologyDisplay:false});
    };

    /**
     * 所有在编辑器页面中,没有被捕获的点击事件,都会在这里被捕获
     * 这里主要是处理一些需要全局监听的操作
     * */
    modificationNoDisplay(e:Event){
        e.stopPropagation();
        if(this.liLists.list.length>0){
            this.liLists.noDisplayModificationMenu();
        }
        this.subMenuListModificationNoDisplay();

        this.setState({});
    }

    /**
     * 关闭subMenuList中所有修改菜单的显示
     * */
    subMenuListModificationNoDisplay(){
        const liListsIndex = this.liLists.findSelectedIndex();
        if(liListsIndex===-1){
            return ;
        }
        const subMenuList = this.liLists.list[liListsIndex].subMenuList;
        subMenuList.noDisplayModificationMenu();
    }



    findSelectedIndex(){
        return this.liLists.findSelectedIndex();
    }

    findSelectedSubmenuIndex(){
        return this.liLists.list[this.findSelectedIndex()].subMenuList.findSelectedIndex();
    }

    setSubMenuStateAndRefreshSubMenu = (subMenuList:SubListFactory)=>{
        this.isEditor = false;
        this.subMenuList = subMenuList;
        this.setState({isSubMenu:true});
    };

    refreshWriteArticle(_this:WriteArticle){
        // 刷新子列表显示的数据,如果列表没有任何文件返回false,否则返回true
        function updateSubmenuList(_this:WriteArticle):boolean{
            const liListsIndex = _this.liLists.findSelectedIndex();
            const reSelectLiListsIndex = liListsIndex - 1;
            //-1和-2分别对应文集类别为空与未选择列表的情况
            if(reSelectLiListsIndex===-1||reSelectLiListsIndex===-2){
                return false;
            }
            _this.liLists.noDisplayModificationMenu();
            _this.liLists.list[reSelectLiListsIndex].onlyDisplayOwn();
            return true;
        }

        return function(){
            const isSubMenu = updateSubmenuList(_this);
            _this.setState({isSubMenu});
        };

    };

    /**
     * 用于给subMenuList刷新WriteArticle组件的函数
     * 同时接受2个提供给Editor组件的参数
     * */
    refreshEditor = (isEditor:boolean, subMenuIndex:number)=>{
        this.isEditor = isEditor;
        this.subMenuIndex = subMenuIndex;
        this.setState({});
    };

    /**
     * 判断subMenuList的长度是否为0
     * 不等于-1时返回true,否则返回false
     * */
    isSubMenuListLength(){
        const index = this.liLists.findSelectedIndex();
        return this.liLists.list[index].subMenuList.findSelectedIndex() !== -1;
    }

    render(){
        const isCreateAnthologyDisplay = this.state===null?false:this.state.isCreateAnthologyDisplay;
        const selectedIndex = this.findSelectedIndex();
        const liListsIndex = this.liLists.findSelectedIndex();
        return (
            <div className="writePage" onClick={this.modificationNoDisplay.bind(this)}>
                <div className="writePage-left menu none-user-select">
                    <div className="createAnthology">
                        <pre/><span onClick={this.createAnthologyDisplayAndRefreshWriteArticle.bind(this)}>新建文集</span>
                        <AnthologySubmit
                            liLists={this.liLists}
                            refreshWriteArticle={this.refreshWriteArticle(this)}
                            createAnthologyNoDisplayAndRefreshWriteArticle={this.createAnthologyNoDisplayAndRefreshWriteArticle}
                            isCreateAnthologyDisplay={isCreateAnthologyDisplay}/>
                    </div>
                    <AnthologyList
                        setSubMenuStateAndRefreshSubMenu={this.setSubMenuStateAndRefreshSubMenu}
                        liLists={this.liLists}/>
                </div>
                {this.state.isSubMenu?
                    <div className="writePage-right">
                        <SubList liLists={this.liLists}
                                 subMenuList={this.subMenuList}
                                 refreshEditor={this.refreshEditor}
                                 sublistCurrent={selectedIndex}/>
                        {this.isEditor&&this.isSubMenuListLength()?
                            <TextEditor
                                subMenuList_list={this.liLists.list[liListsIndex].subMenuList.list[this.subMenuIndex]}
                                markDownEditor={this.liLists.list[liListsIndex].subMenuList.list[this.subMenuIndex].markDownEditor}/>
                            :null
                        }
                    </div>
                    :<div className="writePage-right"/>}
            </div>
        )
    }
}

function mapStateToProps(state:IReducer){
    const {componentRefreshReduce} = state;
    return {componentRefreshReduce}
}

function mapDispatchToProps(dispatch:any) {
    return {dispatch};
}

export default connect(
    mapStateToProps,
    mapDispatchToProps,
    undefined,
    {pure:false})(WriteArticle);

